<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragment::head(title='博客详情')}">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
</head>
<body>


<!--导航-->
<nav class="ui inverted attached segment" th:replace="~{fragment::nav(n=1)}">

</nav>



<!--中间内容-->


<div class="ui container m-padded-tb-massive">

    <th:block th:if="${blog!=null}">
        <div class="ui top attached segment" >

            <input type="hidden" th:value="${blog.id}" id="store-bid">

            <div class="ui horizontal link list">
                <div class="item">
                    <h4 class="ui teal inline header"><img th:src="@{/images/头像.png}" alt="" class="ui mini circular image">want</h4>
                </div>

                <div class="item">
                    <i class="calendar icon"></i>
                    <span th:text="${#dates.format(blog.updateDate,'yyyy-MM-dd')}"></span>
                </div>
                <div class="item">
                    <i class="eye icon" th:text="${blog.views}">888</i>
                </div>
            </div>
        </div>

        <div class="ui attached segment">
            <img th:src="@{/images/海绵宝宝.png}" alt="hhhh" class="ui image fluid rounded">
        </div>
        <div class="ui attached segment">
            <!--        内容-->

            <div class="row article">
                <div th:text="${blog.content}"  class="typo ui container">

                </div>
            </div>
            <div class="ui right aligned basic segment ">
                <label  class="ui orange label" th:text="${blog.shareStatement} ? '原创':'转载'">原创</label>
            </div>
        </div>
    </th:block>





    <div class="ui segment center aligned basic">
        <div id="pay-btn" class="ui orange basic circular button">赞赏</div>
    </div>
    <div class="ui fluid popup transition hidden" id="pay">
        <div class="ui images" style="font-size: inherit !important; width: 100px">
            <div class="image">
                <img class="ui rounded image" th:src="@{/images/weichat.png}">
                <div>支付宝</div>
            </div>
            <div class="image">
                <img class="ui rounded image" th:src="@{/images/weichat.png}">
                <div>微信</div>
            </div>
        </div>
    </div>

    <div class="ui attached message positive">
        <div class="ui grid">
            <div class="eleven wide column">
                博客作者信息
            </div>
            <div class="five wide column">
                二维码
            </div>
        </div>
    </div>


    <div class="ui bottom attached segment">
        <div class="ui comments" >
            <div id="comments">

                <th:block th:fragment="commentlist" th:if="${comments}!=null">
                    <h3 class="ui dividing header">Comments</h3>
                    <div class="comment" th:each="comment:${comments}">
                        <a class="avatar">
                            <img th:src="@{/images/头像.png}">
                        </a>
                        <div class="content">
                            <a class="author" th:text="${comment.nickname}">Elliot Fu</a>
                            <div class="metadata">
                                <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd')}"></span>
                            </div>
                            <div class="text">
                                <p th:text="${comment.content}">這對我的研究是非常有用.謝謝!</p>
                            </div>
                            <div class="actions">
                                <!--                        按钮-->
                                <a class="reply" href="#com-textarea" th:attr="data-nickname=${comment.nickname},data-replyId=${comment.id},data-pid=${comment.id}" onclick="reply(this)">Reply</a>
                            </div>
                        </div>

                        <th:block th:if="${comment.childComments}!=null">
                            <div class="comments" th:each="childcomment:${comment.childComments}">
                                <div class="comment">
                                    <a class="avatar">
                                        <img th:src="@{/images/头像.png}">
                                    </a>
                                    <div class="content">
                                        <a class="author" th:text="${childcomment.nickname}+'回复@'+${childcomment.replyComment.nickname}">Jenny Hess</a>
                                        <div class="metadata">
                                            <span class="date" th:text="${#dates.format(childcomment.createTime,'yyyy-MM-dd')}">刚刚</span>
                                        </div>
                                        <div class="text">
                                            <p th:text="${childcomment.content}">這對我的研究是非常有用.謝謝!</p>
                                        </div>
                                        <div class="actions">
                                            <a class="reply" href="#com-textarea" th:attr="data-nickname=${childcomment.nickname},data-replyId=${childcomment.id}, data-pid=${comment.id}" onclick="reply(this)">Reply</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </th:block>

                    </div>
                </th:block>
            </div>

            //输入评论处
            <form class="ui reply form" method="get" th:action="@{/user/inOrupComment}" id="com-form">

                <input type="hidden" id="bid-in" name="bid">
                <input type="hidden" id="pid-in" name="pid" th:value="-1">
                <input type="hidden" id="reply-in" name="replyId" th:value="-1">


                <div class="field">
                    <textarea id="com-textarea" name="content" th:id="content-in"></textarea>
                </div>
                <div class="ui fields">
                    <div class="field">
                        <div class="ui icon left input">
                            <i class="ui icon user"></i>
                            <input type="text" name="nickname" id="nickname-in">
                        </div>

                    </div>
                    <div class="field">
                        <div class="ui icon left input">
                            <i class="ui icon mail"></i>
                            <input type="text" name="email" id="email-in">
                        </div>
                    </div>
                </div>
                <div class="field">
                    <div class="ui blue labeled submit icon button basic m-margin-tb" id="submit-btn">
                        <i class="icon edit"></i> Add Reply
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>


<footer class="ui inverted vertical segment" th:replace="~{fragment::footer}">
</footer>



<th:block th:replace="~{fragment :: script}">
</th:block>


<script type="text/javascript">
    
    $(function () {
        var bid=$('#store-bid').val();
        $.ajax({
            url:"/user/getComments",
            type:"get",
            data:{
                "id":bid
            },
            success:function (res) {
                $("#comments").html(res);
                $('#bid-in').val(bid);
                console.log(res);
            }
        })

    })


    //赞赏功能
    $('#pay-btn').popup({
        popup:$('#pay'),
        on:'click',
        position:'bottom center',
    })

    function reply(btn) {
        var nickname=$(btn).data("nickname");
        var replyId=$(btn).data("replyId");
        var pid=$(btn).data("pid");
        // $(btn).attr("href","#com-textarea");
        $('#com-textarea').attr("placeholder","回复@"+nickname);
        $('#pid-in').val(pid);
        $('#reply-in').val(replyId);


    }


    //点击提交表单


    $('#submit-btn').click(function () {
        var bid=$('#store-bid').val();
        var pid=$('#pid-in').val();
        var replyId=$('#reply-in').val();
        var content=$('#content-in').val();
        var nickname=$('#nickname-in').val();
        var email=$('#email-in').val();
        $.ajax({
            url:"/user/inOrupComment",
            type:"get",
            data:{
                "bid":bid,
                "pid":pid,
                "replyId":replyId,
                "content":content,
                "nickname":nickname,
                "email":email,
            },
            success:function (res) {
                if (res.success){
                    $('#pid-in').val(-1);
                    $('#reply-in').val(-1);
                    $.ajax({
                        url:"/user/getComments",
                        type:"get",
                        data:{
                            "id":bid
                        },
                        success:function (res) {
                            $("#comments").html(res);
                        }
                    })
                }
            }
        })

    })


</script>
</body>
</html>